<script setup>
import {ref} from "vue";
import {Bottom, Top} from "@element-plus/icons-vue";

const prePlanned = ref(false);
</script>

<template>
  <div id="target">
    <!--target list-->
    <div class="target-list">
      <div class="border">
        <div class="border-title">
          <span>Target List</span>
        </div>
        <el-row>
          <!--左边-->
          <el-col :span="16">

          </el-col>

          <!--右边-->
          <el-col :span="8">
            <!--上方按钮区域-->
            <div class="target-button">
              <div class="MissD-button-area">
                <button class="create-button">
                  Add units currently selected on map
                </button>
              </div>

              <div class="MissD-button-area">
                <button class="create-button">
                  Remove Selected
                </button>
              </div>
            </div>

            <!--中间上下键区域-->
            <el-row>
              <!--箭头-->
              <el-col :span="6">
                <div class="tar-mi-button">
                  <button>
                    <el-icon><Top /></el-icon>
                  </button>

                  <button>
                    <el-icon><Bottom /></el-icon>
                  </button>
                </div>

              </el-col>

              <!--文字-->
              <el-col :span="18">
                <div style="height: 55px; display: flex;
              align-items: center; justify-content: center;">
                  Re-order selected
                </div>
              </el-col>

            </el-row>

            <!--下方选项框区域-->
            <div>
              <div class="AC-enforce">
                <el-row :gutter="5">
                  <el-col :span="4">
                    <input type="checkbox" v-model="prePlanned">
                  </el-col>
                  <el-col :span="20">
                    <label for="prePlanned">
                      Pre-planned targets (in target list) only
                    </label>
                  </el-col>
                </el-row>


              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--target distr-->
    <div class="MissDR-dropdown">
      <div style="display:inline-block;">
        Target Distr:
      </div>
      <select class="MissDR-dropdown-option">
        <option value="option1">

        </option>
      </select>
    </div>

  </div>
</template>

<style scoped>
#target {
  background-color: rgba(60, 63, 65, 0.42);
  height: 415px;
}

/*上方区域*/
.border{
  height: 300px;
  margin-bottom: 30px;
}

.border-title {
  width: 15%;

  background-color: rgba(53,55,56);
}

.target-button {
  margin-top: 10px;
}

/*中间按钮*/
.tar-mi-button button {
  font-size: 10px;
  margin: 2px 0;
  width: 30px;
  height: 25px;
}

/*下方选项区域*/
/* 自定义复选框样式 */
input[type="checkbox"] {
  /* 清除默认复选框样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid white;
  width: 16px;
  height: 16px;
  outline: none;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
}

/* 复选框选中状态样式 */
input[type="checkbox"]:checked::before {
  content: "✓";
  font-size: 16px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中 */
}

/* 标签样式 */
label {
  margin-left: 5px;
  color: white;
  cursor: pointer;
}
.AC-enforce {
  display: flex;
  align-items: center;
}
/*target distr*/
.MissDR-dropdown {
  font-size: 13px;
  color: #1f1f1f;
}

.MissDR-dropdown-option {
  width: 80%;
}


</style>